<template>
  <view class="box-content">
    <view v-if="popupConfig.title" class="box-title-wrap">
      <text class="box-title-txt">
        {{ popupConfig.title }}
      </text>
    </view>
    <slot>
      <view style="padding: 30rpx 50rpx;max-height: 240rpx;text-align: center; overflow: auto;">
        <text :style="popupConfig.contentStyle">
          {{ popupConfig.content }}
        </text>
      </view>
    </slot>
    <slot name="confirm-footer">
      <view class="btn-groups">
        <template v-if="popupConfig.showCancel">
          <button class="btn cancel" hover-class="confirm-btn" :style="{ background: popupConfig.cancelColor }"
                  @click="_onCancelHandler"
          >
            {{ popupConfig.cancelText }}
          </button>
          <button class="btn confirm" hover-class="confirm-btn" :style="{ background: popupConfig.confirmColor }"
                  @click="_onConfirmHandler"
          >
            {{ popupConfig.confirmText }}
          </button>
        </template>
        <button v-else class="btn confirm single" hover-class="confirm-btn"
                :style="{ background: popupConfig.confirmColor }" @click="_onConfirmHandler"
        >
          {{ popupConfig.confirmText }}
        </button>
      </view>
    </slot>
  </view>
</template>

<script lang="ts">
interface ConfirmBoxOptions {
  show?: boolean
  title?: string
  content?: string
  showCancel?: boolean
  showConfirm?: boolean
  cancelText?: string
  cancelColor?: string
  confirmText?: string
  confirmColor?: string
  contentStyle?: string
  hideOnBlur?: boolean
  autoClose?: boolean
  cancelHandler?: () => void
  confirmHandler?: () => void
}
export default {
  props: {
    popupConfig: {
      type: Object,
      default: () => ({
        title: '温馨提示',
        maskColor: 'rgba(0,0,0,.4)',
        content: '',
        showCancel: true,
        showConfirm: true,
        confirmColor: '#007AFF',
        cancelColor: '#f0f0f0',
        contentStyle: 'text-center',
        cancelText: '取消',
        confirmText: '确认',
        hideOnBlur: true,
        autoClose: true,
        cancelHandler: null,
        confirmHandler: null
      })
    },
  },
  emits: ['close'],
  methods: {
    _close() {
      this.$emit('close')
    },
    _onCancelHandler() {
      if (this.popupConfig.autoClose) {
        this._close()
        if (this.popupConfig.cancelHandler) {
          this.popupConfig.cancelHandler('btn')
        }
      }
      else if (this.popupConfig.cancelHandler) {
        this.popupConfig.cancelHandler('btn')
      }
      else {
        this._close()
      }
    },
    _onConfirmHandler() {
      if (this.popupConfig.autoClose) {
        this._close()
        if (this.popupConfig.confirmHandler) {
          this.popupConfig.confirmHandler()
        }
      }
      else if (this.popupConfig.confirmHandler) {
        this.popupConfig.confirmHandler()
      }
      else {
        this._close()
      }
    }
  },
}
</script>

<style scoped lang="scss">
.box-content {
  width: 580rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
}

.box-title-wrap {
  padding: 30rpx 30rpx 0 20rpx;
  text-align: center;
}

.box-title-txt {
  font-size: 31rpx;
  font-weight: bold;
}

.btn-groups {
  display: flex;
  justify-content: center;
  padding: 40rpx 30rpx;
}

.btn {
  width: 180rpx;
  margin: 0 40rpx;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */

  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 70rpx;
  border-radius: 50rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #fff;

  &::after {
    content: '';
    border: none;
  }

  &.confirm {}

  &.cancel {
    color: #555;
  }
}

.confirm-btn {
  filter: brightness(0.9);
}
</style>
